From 4b2b964283075712de98743720ff3e31370ddc8e Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Tue, 8 Sep 2026 08:57:08 +0200
Subject: Deduplicate routine actions and badges across project routes

- Share edit/complete/archive form actions in routine-actions.ts; route
  servers become thin wrappers (strictest guard semantics in one place)
- Move parseFrequencyDays into validation.ts
- Extract ScoreBadge/StatusBadge components; use on project pages and
  the home page instead of duplicated scoreClass/statusClass helpers
- Fix archiveProject calling the routine archive with the project id
---
 .../[projectId]/routine/[routineId]/+page.svelte   | 27 ++++++----------------
 1 file changed, 7 insertions(+), 20 deletions(-)

(limited to 'src/routes/projects/[projectId]/routine/[routineId]/+page.svelte')

diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
index 5f57de4..19713ae 100644
--- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
+++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import ScoreBadge from '$lib/components/ScoreBadge.svelte';
+	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import {
 		formatFrequency,
 		parseIntervalToDays,
-		STATUS_LABELS,
 		computeHealthSeries,
-		type RoutineState,
 	} from '$lib/shared/routine-metrics';
 
 	let { data, form } = $props();
@@ -74,19 +74,6 @@
 			.filter((m): m is { x: number; y: number } => m !== null);
 		return { points, grid, markers };
 	});
-
-	function scoreClass(score: number): string {
-		if (score >= 80) return 'score bg-success';
-		if (score >= 50) return 'score bg-accent';
-		return 'score bg-danger';
-	}
-
-	function statusClass(status: RoutineState['status']): string {
-		if (status === 'ok') return 'status bg-success text-white';
-		if (status === 'due') return 'status bg-accent-soft text-accent';
-		if (status === 'late') return 'status bg-accent text-white';
-		return 'status bg-danger text-white';
-	}
 </script>
 
 <main>
@@ -96,7 +83,7 @@
 
 	<header class="page-header">
 		<h1>{data.routine.name}</h1>
-		<span class={scoreClass(data.state.health)}>{data.state.health}</span>
+		<ScoreBadge score={data.state.health} />
 	</header>
 
 	{#if data.routine.archived}
@@ -195,10 +182,10 @@
 				{/each}
 			</svg>
 			<div class="chart-footer">
-				<span class={statusClass(data.state.status)}>
-					{STATUS_LABELS[data.state.status]}
-					{#if data.state.overdueDays > 0}({data.state.overdueDays} j){/if}
-				</span>
+				<StatusBadge
+					status={data.state.status}
+					overdueDays={data.state.overdueDays}
+				/>
 				<span class="chart-meta">
 					{formatFrequency(data.routine.frequencyDays)}
 					{#if data.state.lastDoneAt}
-- 
cgit v1.3